<template>
    <div>
        <el-page-header @back="gotoback" title="返回">
            <template #content>
                <el-breadcrumb-item :to="{ path: '/organization/zhiwu/detail' }">职务·详情</el-breadcrumb-item>
            </template>
        </el-page-header>
    </div>
    <div class="header">
        <el-row>
            <el-col :span="12">
                <div class="back-ground wich">
                    <span class="span">名称</span>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="back-ground wich">
                    <span class="span">等级</span>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <div class="back-ground">
                    <el-tag class="tag">
                        {{ datas.name }}
                    </el-tag>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="back-ground">
                    <el-tag class="tag">
                        {{ datas.lv}}
                    </el-tag>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <div class="back-ground wich">
                    <span class="span">描述</span>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <div class="back-ground">
                    <el-tag class="tag">
                        {{ datas.explain }}
                    </el-tag>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, onMounted } from 'vue'
import { GetSingleZhiwu } from '../../../api/user/user'
import { useRoute } from 'vue-router';

export default defineComponent({
    setup() {
        const route = useRoute();
        const data = reactive({
            datas: {
                name:'',
                lv:'',
                explain:''
            }
        })
        const events = {
            //返回上一级
            gotoback() {
                window.history.go(-1)
            },
            //显示刷新数据
            data() {
                //详情赋值
                GetSingleZhiwu({
                    id: route.params.id
                }).then((res: any) => {
                    console.log('详情----', res)
                    data.datas = res.data
                })
            }
        }
        onMounted(() => {
            events.data()
        })
        return {
            ...toRefs(data),
            ...events,
        }
    },
})
</script>
<style scoped>
.header {
    border: #ccc solid 1px;
    margin-top: 2vh;
    border-radius: 5px;
}

.back-ground {
    border: #efebeb solid 1px;
    height: 50px;
}

.wich {
    background-color: rgba(240, 239, 245, 0.479);
}

.span {
    float: left;
    margin-top: 2vh;
    margin-left: 1vh;
    color: #c4c7d0;
}

.tag {
    float: left;
    margin-top: 15px;
    margin-left: 10px;
}
</style>
